<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <script src="https://lib.baomitu.com/echarts/latest/echarts.js"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
    </style>
  </head>
  <body>
     <div id="main" style="width:100%;height:400px"></div>
     <script>
        let div1 = document.querySelector('#main');
        let myCharts = echarts.init(div1)
        myCharts.setOption({
            dataZoom:{},  // 缩放
            title:{
               text:'主标题',
               subtext:'副标题',
               textStyle:{
                  color:'blue'
               },
               left:'center',
            },
            xAxis:{
               data:['电影','电视','直播','饮食']
            },
            yAxis:{
               //显示y轴的线
               axisLine:{
                  show:true
               },
               // y轴刻度
               axisTick:{
                  show:true
               },
            },
            series:[  // 绘制什么样的图表 数据展示在这里设置  bar 柱状图  line 折线图   pie 饼图
               {
                 name:'柱状图',
                 type:'bar',
                 data:[10,20,30,40],
                 color:'red',
               },
               {
                 name:'折线图',
                 type:'line',
                 data:[10,20,60,40],
                 color:'yellow',
               },
            ],
            tooltip:{
               textStyle:{  // 提示框的颜色
                  color:'red'
               }
            },
            legend:{  // 切换 看不同类型的图
                data:['柱状图','折线图']
            },
            toolbox: {
                  show: true,
                  feature: {
                     saveAsImage: {},
                     dataZoom: {
                        yAxisIndex: "none"
                     },
                     dataView: {
                         readOnly: false
                     },
                     magicType: {
                         type: ["line", "bar"]
                     },
                     restore: {},
                  }
               },
            // 图表的布局
            grid:{
               left:20,
               right:0
            },
         })
     </script>
  </body>
</html>
